<template>
  <div class="title">
    <div class="titText">
      个人资料
    </div>

    <div class="goEmit"
         @click="clickEmitShow">
      <i class="iconfont icon-bi"></i> 编辑信息
    </div>
    <Popup tit="编辑信息"
           :show="emitShow"
           :close="true"
           @close="closeShow">
      <div class="editInfo">
        <Form :model="formRight"
              label-position="right"
              :label-width="100">
          <FormItem label="昵称">
            <Input v-model="formRight.nickname" />
          </FormItem>
          <FormItem label="个性签名">
            <Input v-model="formRight.desc" />
          </FormItem>
          <FormItem label="地址">
            <Input v-model="formRight.address" />
          </FormItem>
          <FormItem>
            <Button type="primary"
                    @click="checkEdit">确认修改</Button>
            <Button style="margin-left: 8px"
                    @click="closeShow">取消</Button>
          </FormItem>
        </Form>
      </div>

    </Popup>

  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { editUserInfo } from 'server/front_k.js'

export default {
  name: 'EditHead',
  components: {},
  data() {
    return {
      formRight: {},
      emitShow: false
    }
  },
  methods: {
    closeShow() {
      this.emitShow = false
    },
    clickEmitShow() {
      this.emitShow = true
      this.formRight = JSON.parse(JSON.stringify(this.getUserData))
    },
    checkEdit() {
      // 弹出确认框
      this.$show
        .show1({
          title: '修改信息',
          content: '请确认是否修改？',
          success: 'not'
        })
        .then(() => {
          if (this.formRight === this.getUserData) {
         

            return this.$Message.error('没有更改的信息')
          }
          if (!this.$rex.name(this.formRight.nickname)) {
            return this.$Message.error('昵称格式错误')
          }
          if (!this.$rex.address(this.formRight.desc)) {
            return this.$Message.error(
              '签名格式错误，请保持在50字以内，不要输入特殊字符'
            )
          }
          if (!this.$rex.address(this.formRight.address)) {
            return this.$Message.error(
              '地址格式错误，请保持在50字以内，不要输入特殊字符'
            )
          }
          const data = {
            nickname: this.formRight.nickname,
            desc: this.formRight.desc,
            address: this.formRight.address
          }
          editUserInfo(data).then(res => {
            if (res.err_code === 1000) {
              this.emitShow = false

              this.$Message.success('修改成功！')
              this.$show.$emit('getLogin')
            }
          })
        })
        .catch(() => {})
    }
  },
  created() {
    // this.formRight = this.getUserData
  },
  computed: {
    ...mapGetters(['getUserData'])
  }
}
</script>

<style scoped >
.title {
  /* padding:10px 0; */
  padding-bottom: 20px;
  border-bottom: 1px solid #dee0e1;
  display: flex;
  justify-content: space-between;
}
.titText {
  font-size: 20px;
  font-weight: 600;
}
.goEmit {
  cursor: pointer;
  color: #425eb2;
  font-size: 16px;
}
.editInfo {
  margin-top: 20px;
  width: 600px;
  padding: 0 20px;
}
</style>